<style lang="stylus" scoped>
    .container {
        width 100%
        height 100%;
        .content {
            width 100%;
            height 100%;
            margin-top 50px;
            box-sizing border-box;
            padding 10px;
            .address {
                width 100%
                min-height 100px;
                background #fff;
                padding 10px;
                box-sizing border-box;
                border-radius 10px;
                img {
                    width 30px;
                    height 30px;
                    display block
                    margin-right 10px;
                }
                .address-info p>span {
                    font-size: 12px;
                    color #ccc;
                    margin-left 10px;
                }
                div {
                    font-size: 12px;
                }
            }
            .direct {
                width 100%;
                height 100%;
                display block;
                width 20px;
                img {
                    width 20px;
                    height 20px;
                    display block
                }
            }
        }
        .text-overflow-2 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .pro {
            width 100%;
            margin-top: 10px;
            border-radius: 10px;
            box-sizing border-box;
            li {
                width 100%;
                min-height 100px;
                background #fff;
                box-sizing border-box;
                padding: 10px;
                margin-bottom 10px;
                img {
                    width 100px;
                    height 100px;
                    margin-right 10px;
                }
                div {
                    padding 10px 0
                }
                div> p{
                    font-size : 12px;
                }
                div> span {
                    color #f60
                }
                div > font {
                    color #666;
                    font-size:12px;
                }
            }
        }
    }
</style>
<template>
    <div class="container">
        <ComHeader title="确认出货" leftArrow="true"/>
        <div class="content">

            <!-- 地址选择 -->
            <div class="address flex-display flex-center-align">
                <img src="../../../static/img/address.png">
                <div class="address-info flex-num-one flex-display flex-display-column">
                    <p>{{address[0].name}}<span>{{address[0].phone}}</span></p>
                    <div class="text-overflow-2">{{address[0].add}}</div>
                </div>
                <span class="direct flex-display flex-center-align">
                    <img src="../../../static/img/fang.png"/>
                </span>
            </div>

            <!-- 购物车列表 -->
            <ul class="pro flex-display flex-display-column">
                <li class="flex-display" v-for="(item,index) in goodslist" >
                    <img :src="item.imgUrl"/>
                    <div class="flex-display flex-display-column flex-num-one">
                        <p>{{item.text}}</p>
                        <span>金额：￥{{item.price}}</span>
                        <font>数量：{{item.num}}</font>
                    </div>
                </li>
            </ul>
        </div>
        <mt-button type="primary" size="large" class="btn">确认出货</mt-button>
    </div>
</template>
<script>
import ComHeader from '@/common/ComHeader' 
import { Button } from 'mint-ui';
export default {
    data() {
        return {
            goodslist:[
                {
                    imgUrl:'//img.alicdn.com/imgextra/i4/2374743400/O1CN01flHhf71azF7OnPwSP_!!2374743400.jpg_200x200Q50s50.jpg',
                    text:'鞋架多层简易家用经济型收纳防尘布鞋柜宿舍门口小号鞋架子省空间',
                    price:90,
                    num:9,
                },
                {
                    imgUrl:'//img.alicdn.com/imgextra/i4/2374743400/O1CN01flHhf71azF7OnPwSP_!!2374743400.jpg_200x200Q50s50.jpg',
                    text:'鞋架多层简易家用经济型收纳防尘布鞋柜宿舍门口小号鞋架子省空间',
                    price:100,
                    num:10,
                },

            ],
            address:[
                {
                    name:'杨锋',
                    phone:'15876586297',
                    add:'广花一路933号智造广场智造物业有限公司 一楼 门口正对面 塞拉菲娜有限公司'
                },
            ]
        }
    },
    components: {
        ComHeader,
        Button
    }
}
</script>
<style>
    .btn{
        position: absolute ; bottom: 0;left: 0;
    }
</style>


